<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>

<body>
    <div id="example"></div>
    <div id="example1"></div>
    <div id="example2"></div>
    <div id="example3"></div>
    <div id="example4"></div>
    <div id="example5"></div>
    <div id="example6"></div>
    <div id="example7"></div>
    <div id="example8"></div>
    <div id="example9"></div>
    <div id="example10"></div>
    <div id="example11"></div>
    <div id="example12"></div>
    <div id="example13"></div>
</body>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello Word</h1>,
    document.getElementById("example")
)
var names=["moqin1","moqin2","moqin3"];
ReactDOM.render(
    <div>
    {
        names.map(function (params) {
           return  <h1>Hello {params},</h1>
        })
    }
    </div>,
    document.getElementById("example1")
)
var names=[<h1>"moqin1"</h1>,"moqin2","moqin3"];
ReactDOM.render(
    <div>{names},</div>,
    document.getElementById("example2")
)
var HelloMessage=React.createClass({
    render:function () {
        return <h1> hello {this.props.name}</h1>;
    }
})
ReactDOM.render(
    <HelloMessage  name="moqin" />,
    document.getElementById("example3")
)
var Components1=React.createClass({
    render:function () {
        return (
        <ul>
        {
        React.Children.map(this.props.children,function (child) {
            return <li>{child}</li>; 
        })
        }
        </ul>
        )
    }
})
ReactDOM.render(
    <Components1>
        <span>moqin1</span>
        <span>moqin2</span> 
    </Components1>,
    document.getElementById("example4")
)
var Components2=React.createClass({
    propTypes:{
        title:React.PropTypes.string.isRequired
    },
    render:function(){
        return <h1>{this.props.title}</h1>
    }
})
var data=123;
ReactDOM.render(
    <Components2 title={data} />,
    document.getElementById("example5")
)
var DefaultValue=React.createClass({
    getDefaultProps:function () {
        return {
        title:"hello word"
    }
    },
    render:function () {
        return <h1>{this.props.title}</h1>;
    }
})
ReactDOM.render(
    <DefaultValue />,
    document.getElementById("example6")
)
var RefComponet=React.createClass({
    getValueClick:function () {
        this.refs.testValue.focus();
    },
    render:function () {
        return (
            <div>
            <input ref="testValue" type="text" />
            <input  type="button" value="测试" onclick="this.props.getValueClick" />
            </div>
            )
    }
})
ReactDOM.render(
    <RefComponet />,
    document.getElementById("example7")
)
var LikeButton=React.createClass({
    getInitialState:function () {
        return {like:false};
    },
    handleClicks:function () {
        this.setState({like:!this.state.like})
    },
    render:function () {
        var text=this.state.like?"like":"not like";
        return (
            <div onClick={this.handleClicks}>click {text} to toggle</div>
        )   
         }
})
ReactDOM.render(
    <LikeButton />,
    document.getElementById("example8")
)
var Input=React.createClass({
    getInitialState:function () {
        return {value:"hello"}
    },
    handleChange:function (even) {
        this.setState({value:event.target.value})
    },
    render:function () {
        var value=this.state.value;
        return (
        <div>
        <input type="text" onChange={this.handleChange} value={value}/>
        <p>{value}</p>
        </div>
        )
    }
})
ReactDOM.render(
    <Input />,
    document.getElementById("example9")
)
var ChangeOpacity=React.createClass({
    getInitialState:function () {
        return {opacity:1};
    },
    componentDidMount:function () {
        this.time=setInterval(function () {
            var opacity=this.state.opacity;
            opacity-=0.05;
            if(opacity<0.1){
                opacity=1;
            }
            this.setState({
                opacity:opacity
            })
        }.bind(this),100)
    },
    render:function () {
        return (
            <div style={{opacity:this.state.opacity}}>
                Hello,{this.props.name}
            </div>
        )
    }
})
ReactDOM.render(
    <ChangeOpacity name="Moqin" />,
    document.getElementById("example10")
)
</script>

</html>